<template>
  <view class="con">
    <image src="@/static/logo.png" />
    <!-- 登录 -->
    <view class="login-form">
      <view :class="['item', errorTips == 1 ? 'error' : '']">
        <view class="account">
          <text class="input-icon">📱</text>
          <text class="input-label">账号</text>
          <input
            type="text"
            data-type="account"
            placeholder-class="inp-placeholder"
            placeholder="请输入手机号"
            @input="getInputVal"
          />
        </view>
        <view v-if="errorTips == 1" class="error-text">
          <text class="warning-icon"> ! </text>
          请输入账号！
        </view>
      </view>
      <view :class="['item', errorTips == 2 ? 'error' : '']">
        <view class="account">
          <text class="input-icon">🔒</text>
          <text class="input-label">密码</text>
          <input
            :type="showPassword ? 'text' : 'password'"
            data-type="password"
            placeholder-class="inp-placeholder"
            placeholder="请输入密码"
            @input="getInputVal"
          />
          <text class="toggle-password" @tap="togglePassword">
            {{ showPassword ? "🙈" : "👁️" }}
          </text>
        </view>
        <view v-if="errorTips == 2" class="error-text">
          <text class="warning-icon"> ! </text>
          请输入密码！
        </view>
      </view>
      <view class="operate">
        <view class="to-register" @tap="toRegitser">
          还没有账号？
          <text>去注册></text>
        </view>
      </view>
    </view>

    <view class="btn-group">
      <button class="authorized-btn" @tap="login">登录</button>
      <button class="wx-login-btn" @tap="wechatLogin">微信登录</button>
      <button class="to-idx-btn" @tap="toIndex">回到首页</button>
    </view>
  </view>
</template>

<script setup>
import { encrypt } from "@/utils/crypto.js";

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: "用户登录",
  });
});

const principal = ref(""); // 账号
const errorTips = ref(0); // 错误提示
watch(
  () => principal.value,
  () => {
    errorTips.value = 0;
  }
);

const credentials = ref(""); // 密码
/**
 * 输入框的值
 */
const getInputVal = (e) => {
  const type = e.currentTarget.dataset.type;
  if (type == "account") {
    principal.value = e.detail.value;
  } else if (type == "password") {
    credentials.value = e.detail.value;
  }
};
const showPassword = ref(false);
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};
/**
 * 登录
 */
const login = () => {
  if (principal.value.length == 0) {
    errorTips.value = 1;
  } else if (credentials.value.length == 0) {
    errorTips.value = 2;
  } else {
    errorTips.value = 0;
    uni.showLoading({
      title: "登录中...",
      mask: true,
    });
    http
      .request({
        url: "/login",
        method: "post",
        data: {
          userName: principal.value,
          passWord: encrypt(credentials.value),
        },
      })
      .then(({ data }) => {
        http.loginSuccess(data, () => {
          getUserInfo().then(() => {
            uni.hideLoading();
            uni.showToast({
              title: "登录成功",
              icon: "none",
              complete: () => {
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/index/index",
                  });
                }, 1000);
              },
            });
          });
        });
      });
  }
};

/**
 * 去注册
 */
const toRegitser = () => {
  uni.navigateTo({
    url: "/pages/register/register",
  });
};

/**
 * 回到首页
 */
const wechatLogin = () => {
  uni.login({
    provider: "weixin", //使用微信登录
    success: (res) => {
      console.log(res);
      // Content-Type: application/x-www-form-urlencoded
      http
        .request({
          url: "/user/wxLogin",
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          data: {
            code: res.code,
          },
        })
        .then(({ data }) => {
          http.loginSuccess(data, () => {
            getUserInfo().then(() => {
              uni.hideLoading();
              uni.showToast({
                title: "登录成功",
                icon: "none",
                complete: () => {
                  setTimeout(() => {
                    uni.switchTab({
                      url: "/pages/index/index",
                    });
                  }, 1000);
                },
              });
            });
          });
        });
    },
  });
};
/**
 * 获取用户信息
 */
const getUserInfo = () => {
  return http
    .request({
      url: "/p/user/userInfo",
      method: "GET",
    })
    .then(({ data }) => {
      console.log(data, "用户信息");
      uni.setStorageSync("userInfo", data);
      return data;
    });
};

const toIndex = () => {
  wx.switchTab({
    url: "/pages/index/index",
  });
};
</script>

<style scoped lang="scss">
@import "./accountLogin.scss";
</style>
